<template>
	<view class="page_content">
		<view class="head_content">
			<CustomNavbar :left="0" :title="$t('watch.title')"></CustomNavbar>
			<view class="tabs_box">
				<u-tabs :scrollable="false" :lineWidth="0" :list="contentList" :current="contentCurrent" :activeStyle="tabsActiveStyle" :inactiveStyle="tabsInactiveStyle" lineColor="#E91E63" @change="changeContent($event, 1)" />
			</view>
		</view>
		<view class="main_content" v-if="contentList && contentList.length">
			<swiper style="height: 100%" :skip-hidden-item-layout="true" :current="contentCurrent" @change="changeContent($event, 2)">
				<swiper-item style="height: 100%;" v-for="item in contentList" :key="item.id">
					<scroll-view style="height: 100%" :scroll-y="true" :refresher-enabled="true" :refresher-threshold="100" :refresher-triggered="refreshStatus" @refresherrefresh="refreshHandle" @scrolltolower="bottomHandle" @scroll="scrollHandle">
						<view class="content_box">
							<view class="list">
								<view class="item" v-for="(lItem, lIndex) in item.list" :key="lIndex" @click="jumpView('/pages/video/play?id=' + lItem.vid)">
									<view class="img">
										<image class="image" :src="lItem.video.image" mode="aspectFill"></image>
									</view>
									<view class="info">
										<view class="title u-line-1">{{ lItem.video.title }}</view>
										<view class="text1 u-line-2">{{ lItem.video.description }}</view>
										<view class="text2">{{ $t('watch.progress', { episode: lItem.episode.name, total: lItem.video.episodes }) }}</view>
										<view class="btns">
											<view class="button" v-if="item.id == 1" :class="{ collect: lItem.is_favorite == 1 }" hover-class="active" :hover-start-time="0" :hover-stay-time="200" @click.stop="handleCollect(lItem.vid, lItem.is_favorite, lIndex)">
												<u-icon :name="lItem.is_favorite == 1 ? 'star-fill' : 'star'" color="#eee" size="18"></u-icon>
												<text class="text">{{ $t(lItem.is_favorite == 1 ? 'watch.followed' : 'watch.follow') }}</text>
											</view>
											<view class="button" v-else hover-class="active" :hover-start-time="0" :hover-stay-time="200">
												<u-icon name="play-right-fill" color="#eee" size="18"></u-icon>
												<text class="text">{{ $t('watch.watchNow') }}</text>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="nodata" v-if="!item.list.length && item.status == 'nomore'">
								<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
							</view>
							<view class="liststatus" v-else>
								<u-loadmore
									:status="item.status"
									:line="true"
									:loadmoreText="$t('common.loadMore')"
									:loadingText="$t('common.loading')"
									:nomoreText="$t('common.noMore')"
								/>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabsActiveStyle: {
					color: '#E91E63',
					fontSize: '32rpx',
					fontWeight: 'bold',
				},
				tabsInactiveStyle: {
					color: '#999999'
				},
				contentList: [],
				contentCurrent: 0,
				refreshStatus: true,
				isRefresh: false,
			}
		},
		created() {
			this.initializeContentList()
		},
		onLoad() {
			if(!this.contentList.length) {
				this.initializeContentList()
			}
			this.getPlayRecordList()
		},
		computed: {
			currentLocale() {
				return this.$i18n?.locale || this.$locale.get()
			}
		},
		watch: {
			currentLocale() {
				this.initializeContentList(true)
			}
		},
		methods: {
			initializeContentList(preserve = false) {
				const templates = [
					{ id: 1, name: this.$t('watch.recentRecords'), type: 'log' },
					{ id: 2, name: this.$t('watch.followRecords'), type: 'favorite' }
				]
				if(preserve && this.contentList.length) {
					const lengthChanged = this.contentList.length !== templates.length
					this.contentList = this.contentList.map((item, index) => {
						const template = templates[index] || templates[0]
						if(!template) return item
						return {
							...item,
							name: template.name,
							type: template.type
						}
					})
					if(lengthChanged && !this.contentList[this.contentCurrent]) {
						this.contentCurrent = 0
					}
					return
				}
				this.contentList = templates.map(template => ({
					...template,
					list: [],
					page: 1,
					pagesize: 10,
					status: 'loadmore'
				}))
				if(!this.contentList[this.contentCurrent]) {
					this.contentCurrent = 0
				}
			},
			// 	收藏
			handleCollect(vid, collect, index) {
				if(collect == 0) {
					const obj = {
						vid,
						type: 'favorite'
					}
					this.$request('video.addRecord', obj, false).then(res => {
						if(res.code === 1) {
							this.contentList[this.contentCurrent].list[index].is_favorite = 1
						}
					})
				} else {
					const obj = {
						ids: vid,
						type: 'favorite'
					}
					this.$request('video.deleteRecord', obj, false).then(res => {
						if(res.code === 1) {
							this.contentList[this.contentCurrent].list[index].is_favorite = 0
						}
					})
				}
			},
			// 获取播放记录
			getPlayRecordList() {
				const index = this.contentCurrent
				const currentItem = this.contentList[index]
				if(!currentItem) return
				const obj = {
					type: currentItem.type,
					page: currentItem.page,
					pagesize: currentItem.pagesize
				}
				currentItem.status = 'loading'
				this.$request('video.getRecord', obj).then(res => {
					const activeItem = this.contentList[index]
					if(!activeItem) return
					if(res.code === 1) {
						if(res.data && res.data.length) {
							activeItem.list = activeItem.list.concat(res.data)
							if(res.data.length < activeItem.pagesize) {
								activeItem.status = 'nomore'
							} else {
								activeItem.status = 'loadmore'
							}
						} else {
							if(activeItem.page > 1) {
								activeItem.page--
							}
							const timer = setTimeout(() => {
								activeItem.status = 'nomore'
								clearTimeout(timer)
							}, 500)
						}
					}
					this.refreshStatus = false
					this.isRefresh = false
				}).catch(err => {
					this.refreshStatus = false
					this.isRefresh = false
				})
			},
			// 下拉刷新
			refreshHandle() {
				this.refreshStatus = true
				if(!this.isRefresh) {
					this.isRefresh = true
					if(this.contentList[this.contentCurrent]) {
						this.contentList[this.contentCurrent].page = 1
						this.contentList[this.contentCurrent].list = []
					}
					this.getPlayRecordList()
				}
			},
			// 滚动监听
			scrollHandle(e) {
				
			},
			// 触底滚动
			bottomHandle() {
				if(this.contentList[this.contentCurrent]) {
					this.contentList[this.contentCurrent].page++
				}
				this.getPlayRecordList()
			},
			// 切换分类
			changeContent(e, i) {
				const current = i === 1 ? e.index : e.detail.current
				if(current == this.contentCurrent) return
				this.contentCurrent = current
				const target = this.contentList[this.contentCurrent]
				if(target && !target.list.length) {
					this.getPlayRecordList()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page_content {
		overflow: hidden;
		
		.head_content {
			.tabs_box {
				padding: 0 100rpx;
			}
		}
		
		.main_content {
			overflow: hidden;

			.content_box {
				padding: 20rpx 40rpx 60rpx 40rpx;
				
				.list {

					.item {
						margin-bottom: 40rpx;
						display: flex;
						align-items: center;
						
						.img {
							width: 206rpx;
							height: 276rpx;
							border-radius: 20rpx;
							overflow: hidden;
							
							.image {
								width: 100%;
								height: 100%;
							}
						}
						
						.info {
							flex: 1;
							margin-left: 40rpx;
							
							.title {
								font-size: 32rpx;
								color: #000;
								font-weight: 700;
							}
							
							.text1 {
								height: 68rpx;
								font-size: 24rpx;
								color: #666;
								margin-top: 4rpx;
								line-height: 34rpx;
								margin: 10rpx 0;
							}
							
							.text2 {
								font-size: 24rpx;
								color: #111;
								line-height: 34rpx;
							}
							
							.btns {
								margin-top: 20rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;
								
								.button {
									width: calc((100% - 30rpx) / 2);
									height: 64rpx;
									display: flex;
									align-items: center;
									justify-content: center;
									font-size: 28rpx;
									background: linear-gradient(135deg, #E91E63 0%, #9C27B0 100%);
									border-radius: 32rpx;
									color: #fff;
									box-shadow: 0 4rpx 12rpx rgba(233, 30, 99, 0.3);
									transition: all 0.3s ease;
									font-weight: 600;
									
									&.collect {
										background: rgba(233, 30, 99, 0.3);
										backdrop-filter: blur(10rpx);
									}
								
									&.active {
										transform: scale(0.98);
										box-shadow: 0 2rpx 8rpx rgba(233, 30, 99, 0.2);
									}
									
									.text {
										margin-left: 8rpx;
									}
								}
							}
						}
					}
				}
				
				.nodata {
					padding: 15vh 0;
				}
			}
		}
	}
</style>